import {Link, useNavigate} from 'react-router-dom'
import {Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Popconfirm, Table, message} from 'antd'
// 引入汉化包 时间选择器显示中文
import locale from 'antd/es/date-picker/locale/zh_CN'
import imgError from '@/assets/error.png'

// 导入资源
import { Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react'
import useChannel from "@/hooks/useChannel";
import {deleteArticleApi, getArticleApi} from "@/api/article";

const { Option } = Select
const { RangePicker } = DatePicker

const Article = () => {

    const navigate = useNavigate()
    const {channelList} = useChannel()
    const [tableData, setTableData] = useState([])
    const [count, setCount] = useState(0)

    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || imgError} width={80} height={60} alt=""/>
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: data => {
                if(data === 1) {
                    return <Tag color='warning'>待审核</Tag>
                } else if(data === 2) {
                    return <Tag color='success'>审核通过</Tag>
                }
            }
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => navigate(`/publish?id=${data.id}`)} />
                        <Popconfirm title="删除文章" description="确认要删除当前文章吗?" onConfirm={() => onConfirm(data)} okText="确认" cancelText="取消">
                            <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]

    // 筛选功能
    // 1. 准备参数
    const [reqData, setReqData] = useState({
        status: '',
        channel_id: '',
        begin_pubdate: '',
        end_pubdate: '',
        page: 1,
        per_page: 4
    })

    useEffect(() => {
        getArticleApi(reqData).then(res => {
            if(res.message === 'OK'){
                setTableData(res.data.results)
                setCount(res.data.total_count)
            }
        })
    }, [reqData])

    // 2. 获取筛选数据
    const onFinish = (formValue) => {
        setReqData({
            ...reqData,
            page: 1,
            status: formValue.status,
            channel_id: formValue.channel_id,
            begin_pubdate: formValue.date && formValue.date[0].format('YYYY-MM-DD'),
            end_pubdate: formValue.date && formValue.date[1].format('YYYY-MM-DD'),
        })
    }

    // 删除
    const onConfirm = async (data) => {
        deleteArticleApi(data.id).then(res => {
            if(res.message === 'OK'){
                message.success('文章删除成功！')
                setReqData({
                    ...reqData
                })
            }
        })
    }

    const onPageChange = (page) => {
        setReqData({
            ...reqData,
            page
        })
    }

    return (
        <div>
            <Card
                title={<Breadcrumb items={[{ title: <Link to={'/'}>首页</Link> }, { title: '文章列表' }]} />}
                style={{ marginBottom: 20 }}
            >
                <Form initialValues={{ status: '' }} onFinish={onFinish}>
                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value={''}>全部</Radio>
                            <Radio value={1}>待审核</Radio>
                            <Radio value={2}>审核通过</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="频道" name="channel_id">
                        <Select placeholder="请选择文章频道" style={{ width: 200 }}>
                            {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>
                    <Form.Item label="日期" name="date">
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                            筛选
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
            <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
                <Table rowKey="id" columns={columns} dataSource={tableData} pagination={{
                    total: count, pageSize: reqData.per_page, onChange: onPageChange
                }}/>
            </Card>
        </div>
    )
}

export default Article